<template>
  <div class="app-container">
    <el-row>
      <el-col :span="4"
        ><div class="grid-content ep-bg-purple" />
        <div style="padding-right: 10px">
          <el-table
            :data="tableData"
            style="width: 100%"
            fit
            :height="tableHeight() + 118"
          >
             <el-table-column
              align="center"
              label="可注册区域列表"
              min-width="150"
              class-name="small-padding "
            >
              <template #default="scope">
                <div style="display:flex;align-items: center;">
                <GeoJsonToSvg
                    fill="rgba(0,122,255,0.2)"
                    :width="40"
                    :height="40"
                    :geoJson="scope.row.area"
                    :strokeWidth="16"
                />
                <div style="padding-left: 4px;">{{ scope.row.name }}</div>
                </div>
              </template>
            </el-table-column>

            
            <el-table-column
              align="center"
              label="操作"
              min-width="80"
              class-name="small-padding "
            >
              <template #default="scope">
                <el-button
                  type="primary"
                  size="small"
                  @click="showAreaOnMap(scope.row)"
                  >查看</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
      <el-col :span="20">
        <div
          id="map"
          ref="rootmap"
          @contextmenu.prevent
          :style="mapStyle"
        ></div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import "ol/ol.css";
import {  Polygon } from "ol/geom";
import { mapManager } from "@/map/js/MapManager.ts";
import { ref, onMounted } from "vue";
import http from "@/api/js/http";
import { tableHeight } from "@/util/index.ts";

//@ts-ignore
import GeoJsonToSvg from "@/components/svg/GeoJsonToSvg.vue";

const mapStyle = ref({
  width: "100%",
  height: "100%",
});

const tableData = ref<any[]>([]);
onMounted(() => {
  initMap();

  http.get("/reg_area/list").then((resp) => {
    var list = resp.data;
    
    //@ts-ignore
    tableData.value = list;
  });
});

const initMap = () => {
  mapManager.createMap({
    //@ts-ignore
    center: [117.16513704885527, 39.108437933807465],
  });
};

//@ts-ignore
const showAreaOnMap = (row) => {
  var json = JSON.parse(row.area);
  console.log(json);

  var geom = new Polygon([json]);
  if (mapManager.current) {
    //@ts-ignore
    mapManager.current.omap.getView().fit(geom, {
      duration: 1500,
    });
  }
};
</script>
